//  console.log(decodeURIComponent(window.location.search) );   解码url的中文参数

// 顶部交互实现
//1、划入时，下拉列表出现，离开时消失。
$(".tab-top").hover(
  function (e) {
    $(this).find(".hide-top").stop().slideDown().css({ display: "block" });
  },
  function (e) {
    $(this).find(".hide-top").stop().slideUp().css({ display: "none" });
  }
);
// 点击时，登录按钮消失，退出按钮出现
$(".ml30").on("click", function () {
  console.log($(".ml30").first().parent());
  $(".ml30")
    .first()
    .parent()
    .css({ display: "none" })
    .next()
    .css({ display: "block" });
});
//  有账号登录时，按钮交互
let udpData = JSON.parse(localStorage.getItem("udpdata"));
let udpid = udpData.data.id;
// console.log(udpid);
let flag;
if ((flag = udpid)) {
  $("#ccc1").css({ display: "block" });
  $("#ccc1 span").eq(1).text(udpData.data.username);
  $("#ccc").css({ display: "none" });
  $(".tab-top1").css({ display: "block" });
  $(".defaultHeader").css({ display: "none" });
  $(".logheader").css({ display: "block" });
  $(".phoneNum").text(udpData.data.username);
}

//  点击退出时，删除后台数据
$(".ml10").click(function () {
  $("#ccc1").css({ display: "none" });
  $("#ccc").css({ display: "block" });
  $(".tab-top1").css({ display: "none" });
  $(".defaultHeader").css({ display: "block" });
  $(".logheader").css({ display: "none" });
  delete udpData.data.id;
  console.log(udpData);
  localStorage.setItem("udpdata", JSON.stringify(udpData));
  window.location.href = "http://localhost:8080/html/shouye.html";
});

//  购物车跳转按钮
$(".tab-gouwu").click(function () {
  if ((flag = udpid)) {
    window.location.href = "http://localhost:8080/html/cart.html?" + udpid;
  } else {
    window.location.href = "http://localhost:8080/html/login.html";
  }
});

// 下拉列表的功能实现
$(".tab-top .top-menu")
  .eq(0)
  .click(function () {
    window.location.href = "https://jf.10086.cn/#/helpCenter?type=2";
  });
$(".tab-top .top-menu")
  .eq(1)
  .click(function () {
    window.location.href = "http://www.10086.cn/index/bj/index_100_100.html";
  });
$(".tab-top .top-menu")
  .eq(2)
  .click(function () {
    window.location.href = "https://shop.10086.cn/mall_100_100.html";
  });
$(".tab-top .top-menu")
  .eq(3)
  .click(function () {
    window.location.href = "https://mail.10086.cn/?clientId=10717";
  });
//  移入颜色变红
$(".tab-top .top-menu").hover(
  function () {
    $(this).css({ color: "#e5008d", cursor: "pointer" });
  },
  function () {
    $(this).css({ color: "#666666", cursor: "Default" });
  }
);

//  第二部分的交互实现
// 点击热搜词跳转相应的链接   (需要结合接口，跳转相关页面)
$(".hots .hotitem").hover(
  function () {
    $(this).css({ color: "#e5008d" });
  },
  function () {
    $(this).css({ color: "#666666" });
  }
);

// 搜索框内输入文字，相关接口提示

//  第三部分交互
// hover时，底部变红
$(".classA").hover(
  function () {
    $(this).css("color", "#e5008d");
  },
  function () {
    $(this).css("color", "#030303");
  }
);

// 第四部分交互
//  导航栏
$(".category .classbitem").hover(
  function () {
    $(this)
      .css({
        background: "rgb(240,240,240)",
        cursor: "default",
      })
      .children()
      .eq(0)
      .css("color", "#e5008d")
      .end()
      .eq(1)
      .css({ display: "block", right: "-440px" });
  },
  function () {
    $(this)
      .css({ background: "#fff", cursor: "default" })
      .children()
      .eq(0)
      .css("color", "#")
      .end()
      .eq(1)
      .css({ display: "none", right: "0px" });
  }
);

// 列表页
$(".title_list span");

// 右侧栏移入时
// 1、登录跳转页面

//  2、底部兑换 交互
$(".text_m1").hover(function () {
  $(this).children().eq(1).removeClass("cl999");
  $(".text2").children().eq(1).addClass("cl999");
  $(".rechargeContent").css("display", "block");
  $(".rechargeContent1").css("display", "none");
});
$(".text_m2").hover(function () {
  $(this).children().eq(1).removeClass("cl999");
  $(".text1").children().eq(1).addClass("cl999");
  $(".rechargeContent").css("display", "none");
  $(".rechargeContent1").css("display", "block");
});

$(".phoneTab").click(function () {
  $(".navInput input").val(parseInt($(this).text()));
  $(".mmmm").html(parseInt($(this).text()) * 100);
  console.log(parseInt($(this).text()) * 100);
});
$(".navInput input").blur(function () {
  var tt = $(this).val();
  console.log(tt);
  if (tt == "") {
    $(".overLimit").css("display", "block");
    $(".mmmm").html(0);
  } else if (/^[5-9]$|^[1-4][1-9]$|50$/.test(tt)) {
    $(".overLimit").css("display", "none");
    $(".mmmm").html(parseInt(tt) * 100);
  } else {
    $(".overLimit").css("display", "block");
    $(".mmmm").html(parseInt(tt) * 100);
  }
});

//  大型轮播图 ,商品列表接口测试

$.ajax({
  type: "get",
  url: "http://jx.xuzhixiang.top/ap/api/productlist.php?pagesize=100",
  data: { uid: udpData.data.id },
  dataType: "json",
  success: function (data) {
    let yyy = document.querySelectorAll(".dadada");
    // console.log(data.data.length);

    for (let i = 0; i < 64; i++) {
      let num = Math.floor(Math.random() * data.data.length); //取随机数
      // $(".dadada>img")[0].src =data.data[num].pimg;
      // console.log( $(".dadada img")[0]);
      // console.log(data.data[num].pimg);
      yyy[i].children[0].src = data.data[num].pimg; // 每个盒子随机获取不同的路径
      // console.log(yyy[0].children);
    }
  },
});

//   商品列表展示
//  ajax 是异步操作
$.ajax({
  type: "get",
  url: "http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=100",
  data: { uid: udpData.data.id },
  dataType: "json",
  success: function (data) {
    // console.log(udpData.data.id);
    let str = "";
    let liebiao = document.querySelector(".liebiao");

    //  通过新的数组填入随机数
    let arr = [];
    for (let i = 0; i < data.data.length; i++) {
      let num = Math.floor(Math.random() * data.data.length); //取随机数
      if (arr.indexOf(data.data[num]) == -1) {
        arr.push(data.data[num]);
      } else {
        i--;
      }
    }
    arr.forEach((item) => {
      str += `
      <div class="zzzzz bgf shadowHover">
      <a href="http://localhost:8080/html/xiangqing.html?${item.pid}">
        <img src=${item.pimg} alt=""/>
        <p class="pprice font24 clRed">${item.pprice}<span class="font12">积分</span></p>
        <p class="pdesc">${item.pdesc}</p></a>
      </div>
    `;
    });
    //  遍历数据，出现的列表是固定的
    /* data.data.forEach((item) => {
      let num = Math.floor(Math.random() * data.data.length); //取随机数  

      // console.log(item);
      // console.log(item.pdecs);
      str += `
      <div class="zzzzz bgf shadowHover">
      <a href="http://localhost:8080/html/xiangqing.html?${item.pid}">
        <img src=${item.pimg} alt=""/>
        <p class="pprice font24 clRed">${item.pprice}<span class="font12">积分</span></p>
        <p class="pdesc">${item.pdesc}</p></a>
      </div>
    `; 
    }); */

    liebiao.innerHTML = str;

    //   点击商品   存数据   ，购物车调用
    // console.log($(".zzzzz"));
    // let zzz = document.querySelectorAll(".zzzzz");
    // console.log(zzz);
    $(".zzzzz").click(function () {
      console.log(data);

      console.log($(this));
    });
  },
});

//   导航栏 在滚动一定的距离之后再出现

$(function () {
  let flag = true;
  //    当滚动的时候
  $(window).scroll(function () {
    let st = $(this).scrollTop();

    if (st > 500) {
      $(".anchorlinkbox").fadeIn(); //  淡入
    } else {
      $(".anchorlinkbox").fadeOut(); //  淡出
    }
  });
  $(".totop").click(function () {
    //   当楼层被点击时 ，页面不能滚动
    flag = false;

    //     声明  索引 变量   ，其值 为  被点击的  li  的索引
    let index = $(this).index();
    //   页面开始滚动，滚动距离为    content 的对应索引的 li  距离页面的高度
    $("body,html").animate({ scrollTop: 0 }, 500, function () {
      flag = true;
    });
  });
});
